import Taro, { Component } from '@tarojs/taro'
import { View, Image, Progress, Text, Button } from '@tarojs/components'
import { AtButton } from 'taro-ui'
import { Header } from '../common/header';
import './sign.scss';
import '../common/header.scss';
import '../../icon.scss';

export class Sign extends Component {

  constructor(props){
    super(props);
    this.state = {
      sign_day: 5,
      id:0,
      nick_name:'',
      headimgurl:'',
      balance:0,
      mobile:'',
      integral:0,
      continuity_sign_day:0,
      isLogin:1
    }
  }

  componentWillMount () {}

  componentDidMount () { 
    let that = this;
    let user = Taro.getStorageSync('user');
    Taro.request({
      credentials:'include',
      url: 'https://guoxiaojian.guoxiaoge.cn/api/user/my?token='+user.token,
      success(res){
        if(res.statusCode === 200){
          if(res.data.status === 'SUCCESS'){
            that.setState({
              ...res.data.data
            });
          }else{
            if(res.data.status === 'FAILED'){
              if(res.data.failedCode === 'NO_LOGIN'){
                Taro.navigateTo({
                  url:'/pages/login/login'
                });
              }
            }
          }
        }
      }
    })
  }

  onClickLeftIcon(){
    Taro.navigateBack();
  }

  handleSign(){
    let that = this;
    let user = Taro.getStorageSync('user');
    Taro.request({
      credentials:'include',
      url: 'https://guoxiaojian.guoxiaoge.cn/api/user/sign-in',
      data:{
        token:user.token
      },
      method:'POST',
      success(res){
        if(res.statusCode === 200){
          if(res.data.status === 'SUCCESS'){
            that.setState({
              integral: that.state.integral + res.data.data
            });
          }else{
            if(res.data.status === 'FAILED'){
              if(res.data.failedCode === 'NO_LOGIN'){
                Taro.navigateTo({
                  url:'/pages/login/login'
                });
              }
            }
          }
        }
      }
    })
  }

  render () {
    let signLogItem = [
          <View className='sign-log-detail'>
            <Image src='http://images.guoxiaoge.cn/sign@2x.png' mode='widthFix'/>
            <Text>第1天</Text>
          </View>,
          <View className='sign-log-detail'>
            <Image src='http://images.guoxiaoge.cn/sign@2x.png' mode='widthFix'/>
            <Text>第2天</Text>
          </View>,
          <View className='sign-log-detail'>
            <Image src='http://images.guoxiaoge.cn/sign@2x.png' mode='widthFix'/>
            <Text>第3天</Text>
          </View>,
          <View className='sign-log-detail'>
            <Image src='http://images.guoxiaoge.cn/sign@2x.png' mode='widthFix'/>
            <Text>第4天</Text>
          </View>,
          <View className='sign-log-detail'>
            <Image src='http://images.guoxiaoge.cn/sign@2x.png' mode='widthFix'/>
            <Text>第5天</Text>
          </View>,
          <View className='sign-log-detail'>
            <Image src='http://images.guoxiaoge.cn/sign@2x.png' mode='widthFix'/>
            <Text>第6天</Text>
          </View>,
          <View className='sign-log-detail'>
            <Image src='http://images.guoxiaoge.cn/sign@2x.png' mode='widthFix'/>
            <Text>第7天</Text>
          </View>
    ]
    return (
      <View className='sign-content' style={{ marginBottom:this.props.mb}}>
        <Header 
          leftIconType='chevron-left' 
          onClickLeftIcon={this.onClickLeftIcon} 
          title='签到'>
        </Header>
        
        <View className='sign-title'></View>
        <View className='sign-jifen-content'>
          <View className='sign-jifen'>
              <View className='sign-jifen-value'>{this.state.integral}</View>
              <View>我的积分</View>
          </View>
        </View>
        <View className='sign-log-content'>
          <View className='sign-log'>
            <View>已连续签到</View>
            <View className='sign-day'>
              <Text>{this.state.continuity_sign_day}</Text>天
            </View>
          </View>
          <View className='sign-log-detail-content'>
              <View className='sign-log-detail'>
                {
                  this.state.continuity_sign_day >=1
                  ?
                  <Image src='http://images.guoxiaoge.cn/sign@2x.png' mode='widthFix'/>
                  :
                  <Image src='http://images.guoxiaoge.cn/sign-default@2x.png' mode='widthFix'/>
                }
                <Text>第1天</Text>
              </View>
              <View className='sign-log-detail-line'></View>
              <View className='sign-log-detail'>
                {
                  this.state.continuity_sign_day >=2
                  ?
                  <Image src='http://images.guoxiaoge.cn/sign@2x.png' mode='widthFix'/>
                  :
                  <Image src='http://images.guoxiaoge.cn/sign-default@2x.png' mode='widthFix'/>
                }
                <Text>第2天</Text>
              </View>
              <View className='sign-log-detail-line'></View>
              <View className='sign-log-detail'>
                {
                  this.state.continuity_sign_day >=3
                  ?
                  <Image src='http://images.guoxiaoge.cn/sign@2x.png' mode='widthFix'/>
                  :
                  <Image src='http://images.guoxiaoge.cn/sign-default@2x.png' mode='widthFix'/>
                }
                <Text>第3天</Text>
              </View>
              <View className='sign-log-detail-line'></View>
              <View className='sign-log-detail'>
                {
                  this.state.continuity_sign_day >=4
                  ?
                  <Image src='http://images.guoxiaoge.cn/sign@2x.png' mode='widthFix'/>
                  :
                  <Image src='http://images.guoxiaoge.cn/sign-default@2x.png' mode='widthFix'/>
                }
                <Text>第4天</Text>
              </View>
              <View className='sign-log-detail-line'></View>
              <View className='sign-log-detail'>
                {
                  this.state.continuity_sign_day >=5
                  ?
                  <Image src='http://images.guoxiaoge.cn/sign@2x.png' mode='widthFix'/>
                  :
                  <Image src='http://images.guoxiaoge.cn/sign-default@2x.png' mode='widthFix'/>
                }
                <Text>第5天</Text>
              </View>
              <View className='sign-log-detail-line'></View>
              <View className='sign-log-detail'>
                {
                  this.state.continuity_sign_day >=6
                  ?
                  <Image src='http://images.guoxiaoge.cn/sign@2x.png' mode='widthFix'/>
                  :
                  <Image src='http://images.guoxiaoge.cn/sign-default@2x.png' mode='widthFix'/>
                }
                <Text>第6天</Text>
              </View>
              <View className='sign-log-detail-line'></View>
              <View className='sign-log-detail'>
                {
                  this.state.continuity_sign_day >=7
                  ?
                  <Image src='http://images.guoxiaoge.cn/sign@2x.png' mode='widthFix'/>
                  :
                  <Image src='http://images.guoxiaoge.cn/sign-default@2x.png' mode='widthFix'/>
                }
                <Text>第7天</Text>
              </View>
          </View>

          <View className='sign-button'>
            <AtButton size='normal' circle type='primary' onClick={this.handleSign}>立即签到</AtButton>
            <Text>查看积分规则</Text>
          </View>

        </View>
      </View>
    )
  }
}